{% extends "main.html" %}
{% block title %}Create HIT Template{% endblock %}
{% block head %}
<script type="text/javascript" src="/js/tabs.js"></script>
<script type="text/javascript" src="/js/HITPreview.js"></script>
<script type="text/javascript" src="/js/getCampaign.js"></script>
{% endblock %}

{% block pageHeader %}
{% include "templates/navigation.html" %}
{% endblock %}

{% block content %}
<div class="preview-block">
	<h2 class="hit-preview">Preview your HITs Package</h2>
	<!--<div>
		<b>Requester:</b>
		{{requester}}
	</div>-->
	<div class="Reward-HITs-Duration">
		<b>Reward: &#36;</b>
		<span id='reward'> {{reward}}</span> per HIT &nbsp;
		<b>HITs available in this Package:</b> 
		{{hitavailable}} &nbsp;
		<b>Default Time Allotment:</b> 
		{{duration}} &nbsp;
	</div>
	<div class="Qualifications">
		<b>Qualifications Required:</b> &nbsp; {{qualifications}}
	</div>
	
	<div class="question-format">
		<div id='questionform'>{{ QuestionForm }}</div>
	</div>
	<div class="show-HIT"> Showing HIT <b id='currenthit' _count='{{item_list_count}}'>1</b> of {{item_list_count}} &nbsp; <a href='javascript:void(0)' id='previousbtn'>Previous</a>
		| <a href='javascript:void(0)' id='nextbtn'>Next</a>
	 </div>
	 <table id='hitchecktable' style='display:none'>
		{% for item in items %}
			<tr>
				<td>
				<input type="checkbox" name='hitcheck' checked='checked' />
				</td>
				{% for i in item%}
				<td>
					{{i}}
				</td>
				{% endfor%}
			</tr>
		{% endfor %}
	</table>
	<div class="confirm">
	 	<form method='post' action='/preview/hit' id='hitform'>
	 	<input type='hidden' id='index' name='index' />
	 	<input type="submit" value="Confirm HITs Submission" />
	 	</form>
	</div>
</div>
{% endblock %}

{% block footer %}
{% include "templates/copyright.html" %}
<script type='text/javascript'>
	var currenthit=$("#currenthit");
	var rewardColumn=-1;
	
	function viewHit(index){
		$.get('/preview/hit', {index:index},function(data){
			$("#questionform").html(data);
			currenthit.html(index)
			SetPreviousNextBtnClass();
		})
		checktableRow.hide();
		checktableRow.eq(0).show();
		checktableRow.eq(index).show();
		$("#reward").html(GetCellValue(index, rewardColumn))
	}
	
	var rows = $("#hitchecktable").get(0).rows;
	
	function DisplayColumn(nCol) {
	  for (var i=0; i < rows.length; i++)
	  if (rows[i].cells.length > nCol)
	   rows[i].cells[nCol].style.display = "none";
	}
	
	function GetCellValue(row, column){
	    return rows[row].cells[column].innerHTML;
	}
	
	var checktableRow=$("#hitchecktable").find("tr");

	if(checktableRow.length>1)
	{
		// hide ${reward} column
		var rowHeader=checktableRow.eq(0);
		var rowHeaderColumns=rowHeader.find("td");
		for(var i=0; i<rowHeaderColumns.length;i++)
		{
			if($.trim(rowHeaderColumns.eq(i).html())=="reward"){
				rewardColumn=i;
				break;
			}
		}
		DisplayColumn(rewardColumn)
		checktableRow.hide();
		checktableRow.eq(0).show();
		checktableRow.eq(1).show();
		$("#hitchecktable").show()
		$("#reward").html(GetCellValue(1, rewardColumn))
	}
	
	$("#previousbtn").click(function(){
		var index=parseInt(currenthit.html(),10)-1;
		var count=parseInt(currenthit.attr("_count"),10);
		if(index>0&&index<=count){
			viewHit(index)
		}
	})
	$("#nextbtn").click(function(){
		var index=parseInt(currenthit.html(),10)+1;
		var count=parseInt(currenthit.attr("_count"),10);
		if(index>0&&index<=count){
			viewHit(index)
		}
	})
	
	var allcheckbox=$("#hitchecktable").find("input[type=checkbox]");
	var indexArray=[];
	allcheckbox.each(function(i){
		if(i==0){
			$(this).attr("name", "hitcheckAll").attr('id','hitcheckAll')
		}
		else{
			$(this).val(i);
			indexArray.push[i];
		}		
	})
	allcheckbox=$("#hitchecktable").find("input[name=hitcheck]")
	$("#hitcheckAll").click(function(){
		allcheckbox.attr("checked", this.checked)
	})
	allcheckbox.click(function(){
		var checkedCount=$("#hitchecktable").find("input[name=hitcheck]:checked").length;
		if(checkedCount!=allcheckbox.length){
			$("#hitcheckAll").attr("checked",false);
		}
		if(checkedCount==allcheckbox.length){
			$("#hitcheckAll").attr("checked",true);
		}
		
	})
	
	$("#index").val(indexArray.join());
	
	$("#hitform").submit(function(){
		indexArray.length=0;
		allcheckbox.each(function(){
			if(this.checked){
				indexArray.push($(this).val());
			}
		})
		$("#index").val(indexArray.join());
		return true;
	})
	
	function SetPreviousNextBtnClass(){
		var index=parseInt(currenthit.html(),10)-1;
		var count=parseInt(currenthit.attr("_count"),10);
		if(count>1){
			if(index==0){
				$("#previousbtn").addClass("disabledlink")
				$("#nextbtn").removeClass("disabledlink")
			}
			if(index==(count-1)){
				$("#previousbtn").removeClass("disabledlink")
				$("#nextbtn").addClass("disabledlink")
			}
		}
		else{
			$("#previousbtn").addClass("disabledlink")
			$("#nextbtn").addClass("disabledlink")
		}
	}
	SetPreviousNextBtnClass();
</script>
{% endblock %}
